<template>
	<view class="mallIndex">
		<page-head ref="pageHead" :title="'森歌官方商城-商城'" :headtype="1"></page-head>
<!-- 		<view class="indexBg" :style="'top:'+topHeight+'px'"></view>
		<view class="bannerList">
			<swiper class="swiper" circular indicator-dots indicator-color="#EBF1F8" indicator-active-color="#ffcb78" >
				<swiper-item v-for="item in bannerList">
					<image class="bannerImg" :src="item.image"/>
				</swiper-item>
			</swiper>
		</view> -->
		<view class=" searchBox clearfix" @click="apifun.navigate('/pages/index/goods_search')">
				<uni-icons style="margin-top: 6rpx;" class="fl" type="search" size="22" color="#C4C4C4"></uni-icons>
				<view class="fl" style="color: #acabab;margin-top: 6rpx;">产品名称/关键字词</view> 
		</view>
		<view class="flex">
			<view class="flex-1" style="min-width:600rpx">
				<u-tabs :active-color="colorConfig.primary" inactive-color="#333" :current="active" :list="cateList"
					bg-color="transparent" :active-item-style="{fontSize:'32rpx'}" :bar-width="64"
					:bold="false"
					:barStyle="{background: 'linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #f5335e 49%, rgba(255, 255, 255, 0) 100%)'}"
					@change="changeActive">
				</u-tabs>
			</view>
			<router-link :to="{path:'/bundle/pages/goods_cate/goods_cate',query: {id: sc_id,}}">
				<view class="flex cate-btn m-l-10">
					<image class="icon-xs m-r-4" src="/static/image/icon_double.png" alt="">
						分类
				</view>
			</router-link>
		</view>
		<view class="mallBox">
			<template v-for="(item, index) in cateList">
				<view v-if="index >= 0" class="tab-item" v-show="active == index" :key="index">
					<view>
						<cate-home ref="cateItem" :i="index"
							:index="active" :cate="item" :sc_id="sc_id" >
						</cate-home>
					</view>
				</view> 
			</template>
			<!-- <view class="goodsBox">
				<view class="clearfix">
					<view class="goodsControl fl clearfix">
						<view class="g-c-item fl">
							<view class="txt1">集成灶</view>
							<view class="txt2 txtOn2" @click="toIntegral">为你推荐</view>
						</view>
						<view class="g-c-item fl">
							<view class="txt1">洗碗机</view>
							<view class="txt2">家务帮手</view>
						</view>
						<view class="g-c-item fl">
							<view class="txt1">燃气热水器</view>
							<view class="txt2">享受好生活</view>
						</view>
						<view class="g-c-item fl">
							<view class="txt1">净水器</view>
							<view class="txt2">健康饮水</view>
						</view>
						<view class="con-r"><uni-icons class="fr" type="right" size="12" color="#C4C4C4"></uni-icons></view>
					</view>
				</view>
				<view class="goodsList clearfix">
					<view class="goodsItem" v-for="item in goodsList" @click="toGoodsDetail">
							<view>
								<image class="goodsImg" src="/static/image/indexNew.png"/>
							</view>
							<view class="goodsInfo">
								<view class="goodsName ellipsis">SENG森歌智能语音集成灶音集成灶音集成灶</view>
								<view class="goodsTag">蒸烤一体   侧吸下排</view>
								<view class="clearfix">
									<view class="goodsPrice fl">￥10999.00 </view>
									<view class="fr"></view>
								</view>
							</view>
					</view>

				</view>
			</view> -->
		</view>
		<!-- <view class="lookMore">~下拉显示更多~</view> -->
<!-- 		<view class="indexIconBox">
			<view><button  open-type="contact" hover-class="btn-hover"><image class="indexIcon" src="../../static/image/indexIcon1.png" mode=""></image></button></view>
			<view v-if="userLevel!==4">
				<router-link class="" :to="{path: '/pages/mine/invite_fans'}">
					<image class="indexIcon" src="../../static/image/indexIcon2.png" mode=""></image>
				</router-link>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {footprintUpLength} from '@/api/store';
	import {mapActions} from 'vuex';
	import {
		toLogin
	} from '@/utils/login'
	import {
		getAdList,
		getLevelOneList
	} from "@/api/store"
	export default {
		data() {
			return {
				shop_id:0,
				topHeight:0,
				cateList: [],
				showCateList: [],
				active: 0,
				bannerList:[],
				sc_id:'',
			}
		},
		computed: { 
		 
		}, 
		onShow(){
			// this.active = 0;
			// var that=this  
			// setTimeout(function(){
			// 	that.$refs.cateItem[0].upCallback({num:1,size:10})
			// },200)
		},
		onLoad(option) {
			console.log(246)
			this.getCartNum()
			var that=this
			that.getLevelOneListFun()
			that.getBannerList()
			console.log(that.isLogin)
			//that.tabBarList=getApp().globalData.configData.navigation_menu
			
			setTimeout(function(){
				that.$refs.pageHead.getTopHeight()
			},200)
			uni.getSystemInfo({
			    success: function (res) {
			    	// #ifdef  MP-WEIXIN
					var menu = wx.getMenuButtonBoundingClientRect();
					that.topHeight= menu.top+40
					// #endif
				}
			}); 
		},
		methods: {
			...mapActions(['getCartNum']),
			async getBannerList() {
				const {
					code,
					data
				} = await getAdList({
					pid: 7,
					terminal: 1
				})
				if (code == 1) {
					this.bannerList = data;
				}
			},
			changeActive(index) {
				this.active = index
				this.enable = index == 0
				this.showCateList[index] = true
				this.$refs.cateItem[index].upCallback({num:1,size:10})
			},
			// 获取1级分类
			async getLevelOneListFun() {
				const {
					code,
					data
				} = await getLevelOneList();
				if (code == 1) {
					this.cateList = [...data]
				}
			},
			toIntegral(){
				uni.navigateTo({
					url:'/pages/mine/customerInfo'
				})
			},
			toGoodsDetail(){
				uni.navigateTo({
					url:'/bundel/pages/goodsDetail/index'
				})
			},
		}
	}
</script>

<style>
.searchBox{
	text-indent: 20rpx;
	width: 680rpx;
	/* height: 57rpx; */
	background: #fff;
	border-radius: 50rpx; 
	line-height: 57rpx;
	margin: 18rpx auto 20rpx; 
	padding: 6rpx 0;
}
.swiper .wx-swiper-dots-horizontal .wx-swiper-dot{
	margin-right: 0;
	width: 40rpx!important;
	border-radius: 0;
	height: 6rpx;
}
.swiperNew .wx-swiper-dots-horizontal .wx-swiper-dot{
	width: 40rpx!important;
	border-radius: 0;
	height: 6rpx;
}
.cate-btn {
	padding: 12rpx 16rpx 12rpx 20rpx;
	border-radius: 60rpx 0 0 60rpx;
	background-color: rgba(0, 0, 0, .1);
}
.indexIcon{
	width: 100rpx;
	height: 100rpx;
}
.indexIconBox{
	position: fixed;
	right: 20rpx;
	bottom: 160rpx;
}
</style>
<style scoped>
    @import './mall.css';
</style>
